<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门demo</title>
    <!-- 引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
<!-- vue不能够直接作用在body元素上-->
<body >
    <!--
    在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
     但是如果每个页面都独自开发，这无疑增加了我们开发的成本。
    所以我们会把页面的相同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
    -->
    <!-- div指定vue的作用范围  -->
    <div id="app">
        <!--html中使用组件 ，指定组件名称即可
          我们再定义<counter>组件时,他的data并不是之前提供的一个对象.
          取代而至的是,一个组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝.
          如果没有Vue这条规则,点击一下按钮就会影响到其它所有实例.
        -->
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
</body>
<script>
    //data的定义方式比较特殊，必须是一个函数。
   // 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
    //不同的是:组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性
    //定义组件 两个参数：1，组件名称。2，组件对象
    Vue.component("counte",{//名字和上面标签名字一样
        template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    });
    /*每个vue应用都是通过Vue函数创建一个新的VUE实例开始的.*/
    new Vue({
       el: "#app"//指定vue作用的HTML元素  el:是element元素的意思.缩写.通过id选中要渲染的页面元素,本例是一个div
    });


</script>
</html>